<script>
import imageUpload from "../../../../../components/imageUpload/index.vue";
export default {
  name: "answerInput",
  components: { imageUpload },
  props: {
    inputForm: {
      type: Object,
      default: () => ({}),
    },
  },
  data() {
    return {
      localInputForm: {
        userAnswer: "",
        userAnswerImage: "",
      },
    };
  },
  watch: {
    localInputForm: {
      handler(val) {
        this.$emit("update:inputForm", val);
      },
      deep: true,
      immediate: true,
    },
  },
};
</script>

<template>
  <view class="component">
    <view class="title">
      <view class="point"></view>
      <view>作答区域</view>
    </view>
    <!--		文本输入-->
    <view class="input-container">
      <textarea
        v-model="localInputForm.userAnswer"
        placeholder="请输入"
        style="height: 100%; width: 100%"
        :maxlength="-1"
      />
    </view>
    <!--		图片上传-->
    <view class="image-upload-container">
      <imageUpload
        v-model="localInputForm.userAnswerImage"
        :upload-params="{
          dir: 'questionWritingImage',
        }"
      ></imageUpload>
    </view>
  </view>
</template>

<style scoped lang="scss">
.component {
  padding: 30rpx;
  border: 2rpx solid var(--border-color);
  border-radius: 30rpx;
  .title {
    font-size: calc(36rpx * var(--font-size-rate));
    font-weight: bold;
    display: flex;
    > .point {
      width: 10rpx;
      height: 30rpx;
      background: var(--theme-color);
      margin-right: 20rpx;
      margin-top: 10rpx;
    }
  }
  .input-container {
    padding: 30rpx;
    background: var(--gray-background-color);
    margin-top: 30rpx;
    border-radius: 30rpx;
    height: 500rpx;
  }
  .image-upload-container {
    margin-top: 30rpx;
  }
}
</style>
